<template>
	<view>
		<view class="discounts">
			<view class="doubleCoupons">
				
				<view class="discountFont">优惠劵</view>
				
				<view class="detail">
					<view class="detailImg">
						<image src="/static/images/product1.png"></image>
					</view>
					<view class="detailFont">
						<view class="productName">
							植木童装复古polo领儿童毛衣2020新秋装洋气撞色休闲男童长袖套头
						</view>
						<view class="nowPrice">
							<text>券后</text>
							<text class="currentPrice">¥209.00</text>
						</view>
						<view class="originalPrice">
							原价¥309.00
						</view>
						<view class="discountPrice">
							¥50购100券
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less">
.discounts {
	.doubleCoupons {
		margin: 0 auto;
		width: 690rpx;
		height: 300rpx;
		background: url(../../static/images/background1.png) no-repeat;
		background-size: 690rpx 300rpx;
		overflow: hidden;
		.discountFont {
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			margin-left: 50rpx;
			margin-top: 6rpx;
		}
		.detail {
			margin: 25rpx auto 0;
			width: 645rpx;
			height: 214rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			.detailImg {
				height: 170rpx;
				image {
					width: 170rpx;
					height: 100%;
				}
			}
			.detailFont {
				position: relative;
				margin-left: 10rpx;
				box-sizing: border-box;
				line-height: 70rpx;
				.productName {
					width: 410rpx;
					height: 51rpx;
					font-size: 22rpx;
					font-weight: bold;
					color: #343434;
					line-height: 30rpx;
				}
				.nowPrice {
					text {
						font-size: 22rpx;
						font-weight: 500;
						color: #9A9A9A;
					}
					.currentPrice {
						height: 22rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #343434;
						line-height: 30rpx;
						margin-left: 15rpx;
					}
				}
				.originalPrice {
					height: 21rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					text-decoration: line-through;
					color: #9A9A9A;
					line-height: 30rpx;
				}
				.discountPrice {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 190rpx;
					height: 55rpx;
					background: #E25A2A;
					border-radius: 27rpx;
					font-size: 25rpx;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
					line-height: 55rpx;
				}
			}
		}
	}
}
</style>
